<template>
  <a-spin :spinning="confirmLoading">

    <j-form-container >
      <a-form :form="form" slot="detail">

        <a-row>

          <a-row :style="styleObj">
            <!--  <a-card title="内容详情" > -->
            <a-col :span="12">
              <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="issporxq" v-decorator="['titlesummary']" placeholder="请输入标题"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="issporxq"
                  type="radio"
                  v-decorator="['proname']"
                  :trigger-change="true"
                  dictCode="proname"
                  placeholder=""
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="问题类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="issporxq"
                  type="radio"
                  v-decorator="['questiontype']"
                  :trigger-change="true"
                  dictCode="task_type"
                  placeholder="请选择问题类型"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="需求类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="issporxq"
                  type="radio"
                  v-decorator="['needtype']"
                  :trigger-change="true"
                  dictCode="task_xq_type"
                  placeholder="请选择需求类型"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="紧急程度" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="issporxq"
                  type="radio"
                  v-decorator="['priority']"
                  :trigger-change="true"
                  dictCode="jjcd"
                  placeholder="请选择紧急程度"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="模块" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-multi-select-tag
                  :disabled="issporxq"
                  type="checkbox"
                  v-decorator="['project']"
                  :trigger-change="true"
                  dictCode="module"
                  placeholder="请选择问题所属项目"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="影响范围" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="issporxq" v-decorator="['influenceregion']" placeholder="请输入影响范围,多个地区请用逗号分割"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="影响行业" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-multi-select-tag
                  :disabled="issporxq"
                  type="list_multi"
                  v-decorator="['influenceindustry']"
                  :trigger-change="true"
                  dictCode="industry"
                  placeholder="请选择影响行业"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="反馈人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="issporxq" v-decorator="['fkuser']" placeholder="请输入反馈人"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="反馈人身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  type="list"
                  :disabled="issporxq"
                  v-decorator="['fkusersf']"
                  :trigger-change="true"
                  dictCode="fkr_sf"
                  placeholder="请选择反馈人身份"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="截止时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  :disabled="issporxq"
                  placeholder="请选择截止时间"
                  v-decorator="['endtime']"
                  :trigger-change="true"
                  :disabledDate="disabledDate"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12" >
              <a-form-item label="需求负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="issporxq" v-decorator="['realname']" placeholder="暂未设置负责人" ></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-upload :disabled="issporxq" v-decorator="['fileguid']" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="问题详细内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-editor :disabled="issporxq" v-decorator="['questioncontent', { trigger: 'input' }]" />
              </a-form-item>
            </a-col>
            <!-- </a-card> -->
            <a-divider v-if="facjxq">方案</a-divider>
            <!-- <a-card title="方案出具详情" v-if="facjxq" > -->
            <a-col :span="12" v-if="facjxq">
              <a-form-item label="方案名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isfacj" v-decorator="['faname']" ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="fatjsj">
              <a-form-item label="方案提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  :disabled="isfacj"
                  v-decorator="['fatjtime']"
                  :trigger-change="true"
                  :disabledDate="disabledDate"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12" v-if="facjxq" >
              <a-form-item label="预计完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  :disabled="isfacj"
                  v-decorator="['yjovertime']"
                  :trigger-change="true"
                  :disabledDate="disabledDate"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="fatjsj">
              <a-form-item label="方案提交人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="isfacj" v-decorator="['fatcusername']" ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="facjxq">
              <a-form-item label="方案附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-upload :disabled="isfacj" v-decorator="['fafileid']" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>

            <a-col :span="24" v-if="facjxq">
              <a-form-item label="方案详细内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-editor :disabled="isfacj" v-decorator="['fams', { trigger: 'input' }]" />
              </a-form-item>
            </a-col>

            <a-col :span="12" v-if="sfxyzgtr" >
              <a-form-item label="是否需要转给他人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-radio-group name="radioGroup" :default-value="2" @change="changezgtr">
                  <a-radio :value="1">
                    是
                  </a-radio>
                  <a-radio :value="2">
                    否
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="iszfry">

              <a-form-item label="转让人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  placeholder="请选择转让人员"
                  v-decorator="['fzruserid']"

                >
                  <a-select-option v-for="(role, roleindex) in ulist" :key="roleindex.toString()" :value="role.id">
                    {{ role.realname }}
                  </a-select-option>
                </a-select>
              </a-form-item>

            </a-col>

          <!--  </a-card> -->

          </a-row>

          <a-timeline v-if="iscklc" :style="pcphonefloatwidth" >
            <a-timeline-item v-for="todo in todos">
              <a-icon slot="dot" :type="jdjpg" style="font-size: 16px"/>
              <a-divider type="vertical" />
              <div v-for="tod in todo">
                <div v-for="to in tod" >

                  <div>
                    {{ to.nodename }} -- <span style="color: #374cc2" v-if="to.isnew == 2">
                      <a-tag color="green">已审批</a-tag>
                    </span
                    ><span style="color: #374cc2" v-if="to.isnew == 0"><a-tag color="">未开始</a-tag></span>
                    <span style="color: #c2a943" v-if="to.isnew == 1"><a-tag color="blue">待审批</a-tag></span>
                  </div>

                  <p v-if="to.isnew == '2'">审核时间：{{ to.audittime }}</p>
                  <p>审核类型：{{ to.auditrange }}</p>
                  <!-- <p>审核子类型：{{ to.audittype }}</p> -->
                  <p>审核人员：{{ to.auditusername }}</p>
                  <span v-if="to.isnew == '2'">
                    <p v-if="to.shbj == 1">审核进度：
                      <a-tag color="#87d068">通过</a-tag>
                    </p>
                    <p v-if="to.shbj == 2">审核进度：
                      <a-tag color="#f50">退回</a-tag>
                    </p>
                    <p v-if="to.shbj == 2">退回原因：{{ to.auditoption }}</p>
                  </span>
                  <span v-if="to.isnew == '1'">
                    <p v-if="to.shbj == 0">审核进度：
                      <a-tag color="#ffd591">待审核</a-tag>
                    </p>
                  </span>
                  <a-divider/>
                </div>
              </div>

              <!-- <img src="../../../assets/jiantou.png" style="float: left;" /> -->

            </a-timeline-item>
          </a-timeline>

        </a-row></a-form>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction, deleteAction, postAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import moment from 'moment'
import 'moment/locale/zh-cn'
import store from '@/store'

export default {
  name: 'TtQuestionClForm',
  components: {
    JFormContainer,
    JDate,
    JDictSelectTag,
    JMultiSelectTag
  },

  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      ishows: true,
      form: this.$form.createForm(this),
      model: {},
      wtcljg: false,
      wtxq: true,
      facjxq: true,
      bdmodel: {},
      isfacj: false,
      issporxq: true,
      ulist: [],
      iszfry: false,
      sfxyzgtr: false,
      fatjsj: false,
       xzsfzr: '',
      yhid: '',
      yhname: '',

      // 流程图参数

      pcphonefloat: '',
      pcfloatwidth: {
       float: 'right',
       width: '18%'
      },
      phonefloatwidth: {
       float: 'top'
      },
      styleObj2: {
        width: '82%',
        float: 'left'
      },
      styleObj: {},
      styleObj1: {
        width: '100%'

      },

       todos: [],
       jdjpg: 'down-circle',
       draweris: false,
       iscklc: false,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/tt_question_collect/ttQuestionDealRecord/add',
        edit: '/tt_question_collect/ttQuestionCollect/exid',
        queryById: '/tt_question_collect/ttQuestionCollect/queryById',
        queryByquestionId: '/tt_question_collect/ttPlanConfirm/queryByquestionId',
        flowcodelist: '/tt_question_collect/ttCollectFlowNode/list',
          otheruserlistUrl: '/tt_question_collect/ttPlanConfirm/getotheruserlist',
          addfa: '/tt_question_collect/ttPlanConfirm/add',
          tjlc: '/tt_question_collect/ttCollectFlowNode/submitProcess',
          delfa: '/tt_question_collect/ttPlanConfirm/deletebyqsid'
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
    this.showlist()
    this.getAuthority()
  },
  methods: {

    disabledDate(current) {
      return current && current <= moment().endOf('day') - 24 * 60 * 60 * 1000
    },

    // 转给他人出方案
      changezgtr(e) {
        console.log(e.target.value)
         this.xzsfzr = e.target.value
        if (e.target.value == 1) {
          debugger
           this.isfacj = true
           this.iszfry = true
           this.isfalsezr = true
           // this.edit({})
        } else {
          this.isfacj = false
          this.isfalsezr = false
         this.iszfry = false
        }
      },
      // 获取人员信息
    showlist() {
      getAction(this.url.otheruserlistUrl).then((res) => {
        console.log(res.result)
        if (res.success) {
          this.ulist = res.result
          console.log(this.ulist)
        }
      })
      },

    getfacjxqnr(record, fasp) {
      getAction(this.url.queryByquestionId, { questionid: record.id }).then((res) => {
        if (res.success) {
          console.log(res.result)
          if (res.result != null) {
            record['faname'] = res.result.planname
            record['fafileid'] = res.result.fileid
            record['fams'] = res.result.planDescribe
            record['fatjtime'] = res.result.createTime
          }

           this.edit(record, fasp)
          console.log('record', record)
        }
      })
    },

    // 判断手机端还是pc端
     IsPC() {
      var userAgentInfo = navigator.userAgent
      console.log('userAgentInfo', userAgentInfo)
      var Agents = ['Android', 'iPhone',
            'SymbianOS', 'Windows Phone',
            'iPad', 'iPod']
      var flag = true
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false
          break
        }
      }
      // false 为手机端打开，ture为pc端打开
      console.log('flag', flag)
      // return flag
      if (flag == false) {
        console.log('手机端打开')
         this.styleObj = this.styleObj1
         this.pcphonefloatwidth = this.phonefloatwidth
        // this.pcphonefloat = 'top'
      } else {
        console.log('pc端打开')
         this.styleObj = this.styleObj2
          this.pcphonefloatwidth = this.pcfloatwidth
        //  this.pcphonefloat = 'right'
      }
    },

    // 查看流程
       seeProcess(record) {
       //  if (record.auditstatus === '3') {
           // 如果是退回的记录，则显示shbj为1的退回记录
        //   this.scbj = '1'
       //  } else {
           this.scbj = '0'
      //   }
         let params = { id: record.id, scbj: this.scbj, lclx: 'falc' }
         getAction(this.url.flowcodelist, params).then((res) => {
           if (res.success) {
             let lis = res.result
            this.col = parseInt(24 / (lis.length))
            console.log(this.col)
             this.todos = lis
           }
         })

         // this.shjllczt(record.id)
         this.draweris = true
       },

    add() {
      this.edit({})
    },
    bdsj(record, fasp) {
      //  this.bdmodel = record

      // console.log('bdmodel', this.bdmodel)
      // 获取方案详情
       this.getfacjxqnr(record, fasp)
    },

    edit(record, fasp) {
      if (fasp == 'fasp') {
      console.log('方案出具')
      this.isfacj = false
      this.facjxq = true
      this.iszfry = false
      this.sfxyzgtr = true
      this.fatjsj = false
      } else {
      console.log('详情')
      this.isfacj = true
      this.iszfry = false
    //   this.facjxq = false
     this.sfxyzgtr = false

       if (record.fashbj == '0') {
         this.facjxq = false
         this.iscklc = false
         this.styleObj = this.styleObj1
          this.fatjsj = false
       } else {
         this.facjxq = true
         this.IsPC()
         this.iscklc = true
         this.seeProcess(record)
          this.fatjsj = true
       }
      }

      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'titlesummary',
            'proname',
            'project',
            'fkuser',
            'fkusersf',
            'questiontype',
            'needtype',
            'priority',
            'influenceregion',
            'influenceindustry',
            'questioncontent',
            'poroposername',
            'fileguid',
            'endtime',
            'collectorname',
            'auditstatus',
            'dealstatus',
            'fafileid',
            'faname',
            'fams',
            'fatjtime',
            'fatcusername',
            'yjovertime',
            'realname'

          )

        )
      })
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },

    // 获取当前用户登录名
       getAuthority() {
         let usercode = store.getters.userInfo.id
         console.log(store.getters.userInfo)
         console.log('当前登录用户id:', usercode)
         this.yhid = usercode
         this.yhname = store.getters.userInfo.realname
       },

    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        console.log('model', this.model)
          let formData = Object.assign(this.model, values)
          console.log('表单提交数据', formData)

          that.confirmLoading = true
            if (this.xzsfzr === 1) {
                // 先删除此问题的所有方案，再添加
                deleteAction(that.url.delfa, { id: that.model.id }).then((res) => {
                     if (res.success) {
                       this.form.validateFields((err, values) => {
                          if (!err) {
                            values['planQuestionid'] = this.model.id
                            values['sfzr'] = '1'
                             console.log('va', values)

                             if (values.fzruserid == 'undefined' || values.fzruserid == '' || values.fzruserid == null) {
                               that.$message.warning('请选择转让人员！')
                               that.confirmLoading = false
                               return
                             }

                                postAction(that.url.addfa, values).then((res) => {
                                   if (res.success) {
                                      that.$message.success(res.message)
                                      that.$emit('ok')
                                      that.loadData()
                                         this.showplantc = false
                                     } else {
                                       that.$message.warning(res.message)
                                     }
                              })

                              .finally(() => {
                                that.loading = false
                                that.confirmLoading = false
                              })
                            }
                              })
                       } else {
                         that.$message.warning(res.message)
                       }
                })
            } else {
              // 先删除此问题的所有方案，再添加
              deleteAction(that.url.delfa, { id: that.model.id }).then((res) => {
                   if (res.success) {
                 this.form.validateFields((err, values) => {
                    if (!err) {
                      values['planQuestionid'] = this.model.id
                      values['fzruserid'] = this.yhid
                      values['fzrusername'] = this.yhname
                      values['planname'] = this.model.faname
                      values['fileid'] = this.model.fafileid
                       values['planDescribe'] = this.model.fams
                       values['sfzr'] = '2'
                        values['by1'] = this.model.yjovertime
                       console.log('va', values)
                     postAction(that.url.addfa, values).then((res) => {
                       if (res.success) {
                         // 提交流程
                         var formData = new FormData()
                         formData.append('id', this.model.id)
                         formData.append('flowCode', 'flowcode')
                          formData.append('lclx', 'falc')
                         httpAction(that.url.tjlc, formData, 'post')
                           .then((res) => {
                             if (res.success) {
                               that.$message.success(res.message)
                               that.$emit('ok')
                               that.loadData()
                             } else {
                               that.$message.warning(res.message)
                             }
                           })
                       } else {
                         that.$message.warning(res.message)
                       }
                        })
                        .finally(() => {
                          that.confirmLoading = false
                        })
                   }
                 })
                   this.showplantc = false
                   } else {
                            that.$message.warning(res.message)
                          }
                   })
            }
      })
    },

    popupCallback(row) {
      this.form.setFieldsValue(
        pick(
          row,
          'titlesummary',
          'proname',
          'project',
          'questiontype',
          'needtype',
          'priority',
          'fkuser',
          'fkusersf',
          'influenceregion',
          'influenceindustry',
          'questioncontent',
          'fileguid',
          'poroposername',
          'endtime',
          'collectorname',
          'auditstatus',
          'dealstatus',
          'planid',
          'pllanname',
          'yjovertime',
           'by1',
           'realname'
        )
      )
    }
  }
}
</script>
